<template>
	<view class="container">
		<view class="goodslist">
			<checkbox-group @change="checkboxChange">
				<label class="item" v-for="item in data.list" :key="item.goods_id">
					<view class="left">
						<checkbox color="#0bc4e3" :value="item.goods.order_id" :checked="item.checked" />
					</view>
					<view class="right">
						<view class="imgs">
							<image :src="item.goods.img" mode=""></image>
						</view>
						<view class="info">
							<view class="name">
								{{item.goods.name}}
							</view>
							<view class="attributes">
								规格：{{item.attributes}}
							</view>
							<view class="box">

								<view class="price">¥{{item.price}}</view>
								<view class="number">
									{{item.number}}
								</view>
							</view>
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<view class="listbox">
			<radio-group @change="radioChange">
				<label class="item" v-for="(item, index) in data.items" :key="item.value">
					<view class="left">
						<view class="name">
							{{item.name}}
						</view>
						<view class="title">
							{{item.title}}
						</view>
					</view>
					<view>
						<radio color="#0bc4e3" :value="item.value" :checked="item.value == data.current" />
					</view>
				</label>
			</radio-group>
		</view>
		<view class="content">
			<view class="isshouhuo" v-if="data.state!=1">
				<view class="name">
					<text>*</text>是否已收到货
				</view>
				<view class="names"  @click="popups.open('bottom')">
					{{data.itemsss[data.currentss].name}} >
				</view>
			</view>
			<view class="isshouhuo">
				<view class="name">
					退款原因
				</view>
				<view class="names"  @click="popup.open('bottom')">
					{{data.itemss[data.currentsss].name}} >
				</view>
			</view>
			<view class="isshouhuo">
				<view class="name">
					退款金额<text> ¥{{$toFiexd(data.form.money,2)}}</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="isshouhuo">
				<view class="name">
					退款说明
				</view>
			</view>
			<uni-easyinput type="textarea" v-model="data.form.illustrate" placeholder="退款说明200字"></uni-easyinput>
			<view class="isshouhuo">
				<view class="name">
					上传凭证
				</view>
			</view>
			<view class="imglist">
				<image v-for="item in data.form.img" :src="item" mode="aspectFill" ></image>
				<image src="https://img.fubaozx.cn/static/oldImg/16995015733393.png" mode="" @click="$Uplode(imglist)"></image>
			</view>
		</view>
		<view class="bottomButtons"></view>
		<view class="bottomButton">
			<view class="btn" @click="applyRefunds">申请退款</view>
		</view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popups">
			<view class="popupbox">
				<view class="title">是否收到货</view>
				<uni-icons class="closeempty" type="closeempty" size="22" @click="popups.close()"></uni-icons>
				<view class="radiobox">
					<radio-group @change="radioChanges">
						<label class="item" v-for="(item, index) in data.itemsss" :key="index">
							<view class="left">
								<view class="name">
									{{item.name}}
								</view>
							</view>
							<view>
								<radio color="#FF0C2D" :value="item.value" :checked="index == data.currentss" />
							</view>
						</label>
					</radio-group>
				</view>
				<view class="btns"  @click="popups.close()">
					确定
				</view>
			</view>
		</uni-popup>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup">
			<view class="popupbox">
				<view class="title">选择退款原因</view>
				<uni-icons class="closeempty" type="closeempty" size="22" @click="popup.close()"></uni-icons>
				<view class="radiobox">
					<radio-group @change="radioChangess">
						<label class="item" v-for="(item, index) in data.itemss" :key="index">
							<view class="left">
								<view class="name">
									{{item.name}}
								</view>
							</view>
							<view>
								<radio color="#FF0C2D" :value="item.value" :checked="index == data.currentsss" />
							</view>
						</label>
					</radio-group>
				</view>
				<view class="btns"  @click="popup.close()">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
const {proxy} = getCurrentInstance();
	const data = reactive({
		state:0,
		states:0,
		list: [],
		form:{
			orders:'Z1701876562422411264',
			order_id:[75],
			img:[],
			money:0,
			reason:'拍错/多拍/不喜欢',//退款原因
			illustrate:'',//退款说明
			refunds_type:1,//退款类型 (0, '退货退款'), (1, '仅退款')
			received:0,//是否收到货 (0, '未收到'), (1, '已收到')
		},
		order: '',
		current:1,
		currents:0,
		currentss:0,
		currentsss:0,
		items: [{
				value: '1',
				name: '仅退款(无需退货)',
				title: '未收到商品，或卖家协商同意不退货仅退款'
			},
			{
				value: '0',
				name: '我要退货退款',
				title: '已收到商品，需要退回给商家',
			}
		],
		itemss: [
			{
				value: '0',
				name: '拍错/多拍/不喜欢',
			},
			{
				value: '1',
				name: '版本/批次/颜色/容量等与商品描述不符',
			},
			{
				value: '2',
				name: '卖家发错货',
			},
			{
				value: '3',
				name: '假冒品牌',
			},
			{
				value: '4',
				name: '收到商品少件/破损或污渍',
			}
		],
		itemsss:[
			{
				value: '0',
				name: '未收到',
			},
			{
				value: '1',
				name: '已收到',
			}
		]
	})
	let popup=ref()
	let popups=ref()
	onLoad((option) => {
		data.order = option.id
		data.form.orders= option.id
		data.states= option.state
		orderDetails()//获取订单信息
	})
	onShow(() => {})
	onPullDownRefresh(() => {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	})
	onReachBottom(() => {
		console.log('onReachBottom')
	})
	function submit(){//申请

	}
	function imglist(e){//上传凭证
		if(data.form.img.length<3){
			data.form.img.push(e)
		}else{
			uni.showToast({
				icon:"none",
				title:'最多上传3张'
			})
		}

	}
	function orderDetails() { //获取订单
	data.list=[]
		proxy.$request({
			url: `api/order/`,
			method: 'PUT',
			data: {
				order: data.order,
				state:Number(data.states)
			},
			success: (res) => {
				for (let var1 in res.data) {
					data.state=res.data[var1][0].state
					if(res.data[var1][0].state==1){
						data.items.pop()
					}
					data.list = [...data.list,...res.data[var1]]
					data.list[0]['checked']=true
					data.form.order_id=[data.list[0].ID]
					data.form.money=data.list[0].number*data.list[0].price
				}
				// data.state=res.data[0][0].state
				// if(res.data[0].state==1){
				// 	data.items.pop()
				// }
				// data.list = res.data[0]
				// data.list[0]['checked']=true
				// data.form.order_id=[data.list[0].ID]
				// data.form.money=data.list[0].number*data.list[0].price
			}
		})
	}
	function applyRefunds() { //获取订单
	console.log(data.form.refunds_type,"+++++++++++++++++")
		let datas={
			orders:data.form.orders,
			order_id:data.form.order_id,
			img:JSON.stringify(data.form.img),
			money:data.form.money,
			reason:data.form.reason,
			illustrate:data.form.illustrate,
			refunds_type:data.form.refunds_type,
			received:data.form.received,
		}
		if(!datas.money){
			uni.showToast({
				icon:'none',
				title:'请选择商品'
			})
			return
		}
		if(!datas.illustrate){
			uni.showToast({
				icon:'none',
				title:'请输入退款说明'
			})
			return
		}
		proxy.$request({
			url: `api/applyRefunds/`,
			method: 'POST',
			data:datas,
			success: (res) => {
				uni.showToast({
					icon:'none',
					title:res.errmsg
				})
				setTimeout(()=>{
					uni.navigateBack()
				},1000)

			}
		})
	}
	function radioChange(e) {//退货/退款组合
	console.log(e)
		data.current =	e.detail.value
		data.form.refunds_type=Number(e.detail.value)
	}
	function radioChanges(e) {//退货/退款组合
	console.log(e)
		data.currentss = e.detail.value
		data.form.received=Number(e.detail.value)
	}
	function radioChangess(e) {//退货/退款组合
	console.log(e)
		data.currentsss = e.detail.value
		data.form.reason=data.itemss[Number(e.detail.value)].name
	}
	function checkboxChange(e) {//商品选择
		data.form.order_id=e.detail.value
		console.log(e)
		let lists=[]
		e.detail.value.forEach(items=>{
			lists.push(...data.list.filter(item=>{
				return items==item.goods.order_id
			}))
		})
		console.log(lists)
		data.form.money=lists.reduce((a,b)=>{
			 return a+b.price*b.number
			 },0)
	}
</script>

<style lang="scss" scoped>
	.container {
		.goodslist {
			background-color: #fff;

			.item {
				padding: 30upx;
				display: flex;
				align-items: center;

				.right {
					display: flex;
					width: 100%;

					.imgs {
						width: 200upx;
						height: 200upx;
						margin-right: 20upx;

						image {
							width: 200upx;
							height: 200upx;
							border-radius: 30upx;
						}
					}

					.info {
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							color: #333;
							font-size: 32upx;
							font-weight: bold;
						}

						.attributes {
							color: #999;
							font-size: 24upx;
						}

						.box {
							display: flex;
							font-size: 32upx;
							justify-content: space-between;
						}
					}
				}
			}
		}
		.listbox {
			background-color: #fff;
			margin-top: 30upx;

			.item {
				display: flex;
				justify-content: space-between;
				padding: 20upx;
				align-items: center;

				.left {
					.name {
						font-size: 28upx;
						font-weight: bold;
					}

					.title {
						font-size: 24upx;
						color: #999;
					}
				}
			}
		}
		.content{
			background-color: #fff;
			margin-top: 30upx;
			padding: 20upx;
			.isshouhuo{
				padding: 20upx 0;
				display: flex;
				justify-content: space-between;
				.name {
					font-size: 28upx;
					font-weight: bold;
					text{
						color: $color1;
					}
				}
				.names{
					color: #999;
					font-size: 28upx;
				}
			}
			.imglist{
				display: flex;
				flex-wrap: wrap;
				image{
					width: 130upx;
					height: 130upx;
					margin-right: 20upx;
				}
			}
		}
	}

	::v-deep .uni-checkbox-input {
		background-color: #f5f5f5 !important;

		svg {
			color: $color1 !important;
		}
	}
	.popupbox{
		padding: 30upx;
		background-color: #f5f5f5;
		border-radius: 60upx 60upx 0 0 ;
		position: relative;
		height: 70vh;
		padding-bottom: 110upx;
		.title{
			text-align: center;
			font-size: 32upx;
		}
		.closeempty{
			position: absolute;
			top: 30upx;
			right: 30upx;
		}
		.radiobox {
			background-color: #fff;
			margin-top: 30upx;
			border-radius: 20upx;
			.item {
				display: flex;
				justify-content: space-between;
				padding: 30upx;
				align-items: center;

				.left {
					.name {
						font-size: 28upx;
						font-weight: 700;
					}
				}
			}
		}
		.btns{
			background: $color1;
			position: absolute;
			bottom: 30upx;
			left: 30upx;
			right: 30upx;
			padding: 20upx;
			text-align: center;
			color: #fff;
			border-radius: 40upx;
		}
	}
</style>
